<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 待选项列表 -->
    <!-- 输入框 -->
    请输入要搜索的内容：<input type="text" list="fruit">
    <!-- 数据源 -->
    <datalist id="fruit">
        <option value="">苹果 1</option>
        <option value="">苹果 2</option>
        <option value="">苹果 3</option>
        <option value="">苹果 4</option>
        <option value="">香蕉</option>
    </datalist>
    <!-- 数字表单标签 -->
    <br>
    <input type="number">
    <!-- 邮箱 -->
    <br>
    <input type="email">
    <!-- 日期选择器 -->
    <br>
    <input type="date">
    <!-- 颜色选择器 -->
    <br>
    <input type="color">
</body>

</html>